<template>
	<w-container class="vintage_begbuy">
		<w-navbar id='my-nav' bgColor="transparent" placeholder title="求购详情" :titleStyle="{color:'#fff'}" leftIcon="back-btn-white"></w-navbar>
		<view class="warp plr-16">
			<view class="content ptb-16 plr-12 bg-color-white flex" v-if="topInfo">
				<view class="left flex flex-dir-col flex-ai-center">
					<w-image :src="topInfo.collection_info.listimg" width="70" height="70"  mode="aspectFill"></w-image>
					<view class="font-color-textPrimary mt-4 font-size-12 font-w-500">{{topInfo.collection_info.name}}
					</view>
				</view>
				<view class="right flex-1 ml-12">
					<view class="top flex flex-ai-center flex-js-sb pb-12 pt-10">
						<view class="flex flex-ai-center">
							<view class="font-size-13 font-color-666">最近成交价:</view>
							<view class="font-color-textPrimary font-w-bold ml-4"><text
									class="font-size-10">¥</text><text
									class="font-size-12">{{topInfo.recent_price}}</text></view>
						</view>
						<view :class="`${topInfo.scale>0?'rose':'lose'}`">{{topInfo.scale}}%</view>
					</view>
					<view class="bottom flex pl-16 flex-js-sb mt-12">
						<view class="flex flex-dir-col flex-ai-center">
							<view class="font-color-theme font-w-bold font-size-12"><text
									class="font-size-10">¥</text><text
									class="font-size-12">{{topInfo.today_max_price || '--'}}</text></view>
							<view class="font-color-999 font-size-12 mt-4">今日最高</view>
						</view>
						<view class="flex flex-dir-col flex-ai-center">
							<view class="font-w-bold font-size-12" style="color: #10E432;"><text
									class="font-size-10">¥</text><text
									class="font-size-12">{{topInfo.today_min_price || '--'}}</text></view>
							<view class="font-color-999 font-size-12 mt-4">今日最低</view>
						</view>
						<view class="flex flex-dir-col flex-ai-center">
							<view class="font-color-textPrimary font-w-bold font-size-12">{{topInfo.current_buying}}
							</view>
							<view class="font-color-999 font-size-12 mt-4">求购数</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list mt-13">
			<view class="header flex flex-ai-center flex-js-center">
				<w-icon name="title-icon" size="16"></w-icon>
				<view class="font-color-textPrimary font-size-16 ml-4">求购订单</view>
			</view>
			<view class="mt-20 plr-16 flex flex-ai-end flex-js-sb" v-for="item in list" :key="item.id">
				<view class="mr-14 font-size-20 font-w-bold font-color-textPrimary">￥{{item.price}}</view>
				<view class="flex-1">
					<view class="line"></view>
					<view class="num font-color-999 font-size-10 text-center mt-2">{{item.number}}笔</view>
				</view>
			</view>
			<w-loading :type="loading" class="mt-12" emptyType="search" empty-top="40"></w-loading>
		</view>
		<view class="action bg-color-pageBg">
			<view class="shop-action-container flex flex-js-sb flex-ai-center">
				<w-button style='width:100%;margin-right: 32rpx;' pain shape="circle" @click='goSell'>出售</w-button>
				<w-button style='width:100%' shape="circle" @click='openBottom'>发布求购</w-button>
			</view>
		</view>
		<w-popup-bottom :show="publishShow" title="求购订单" @change="publishChange">
			<template #title>
				<view style="margin-right: auto;" class="ml-4">
					<w-icon name="vshop_tips" size="20" @click="tipsShow = true"></w-icon>
				</view>
			</template>
			<view class="pulish_warp">
				<view class="mt-12 br-12" style="background: #f2f2f2;">
					<view class="pa-16 flex flex-ai-center flex-js-sb"
						style="border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);">
						<view class="font-color-textPrimary font-size-14">求购数量</view>
						<input type="number" placeholder="请输入求购数量" style="text-align: right;font-size: 28rpx;flex: 1;"
							v-model="form.number" />
						<view class="font-color-textPrimary font-size-14 ml-12">个</view>
					</view>
					<view class="pa-16 flex flex-ai-center flex-js-sb">
						<view class="font-color-textPrimary font-size-14">求购单价</view>
						<input type="number" placeholder="请输入求购单价" style="text-align: right;font-size: 28rpx;flex: 1;"
							v-model="form.price" />
						<view class="font-color-textPrimary font-size-14 ml-12">元</view>
					</view>
				</view>
				<view class="mt-12 flex flex-ai-center flex-js-sb"
					v-if="begBuyConsumptionInfo.consumption_collection_name">
					<view class="font-size-12"><text class="font-color-666">藏品名称:</text> <text
							class="font-color-textPrimary">{{begBuyConsumptionInfo.consumption_collection_name}}</text>
					</view>
					<view class="font-size-12"><text class="font-color-666">发布消耗:</text> <text
							class="font-color-textPrimary">x{{begBuyConsumptionInfo.beg_consumption_number}}</text>
					</view>
				</view>
				<w-button style='width:100%' :disabled="!form.price||!form.number" class="mt-16" shape="circle"
					@click='handleSubmit'>立即发布
				</w-button>
			</view>
		</w-popup-bottom>
		<w-modal :show="tipsShow" title="求购须知" @action="tipsShow = false" submitText="知道了" :showCancelButton="false">
			<view class="flex flex-dir-col flex-ai-center pt-16">
				<u-parse :content='appConfig.trade_rule'></u-parse>
			</view>
		</w-modal>
		<w-modal :show="confirmShow" title="" @action="confirmAction" submitText="确定发布">
			<view class="pt-16">
				<view class="flex flex-js-center">
					<w-image v-if="topInfo" :src="topInfo.collection_info.listimg" width="70" height="70"></w-image>
				</view>
				<view v-if="topInfo" class="mt-16 font-color-textPrimary font-size-16 font-w-500 text-center">
					{{topInfo.collection_info.name}}
				</view>
				<view class="mt-16 flex flex-ai-center flex-js-sb font-size-14">
					<view class="font-color-666">求购数量:</view>
					<view class="font-color-textPrimary">x{{form.number}}</view>
				</view>
				<view class="mt-16 flex flex-ai-center flex-js-sb font-size-14">
					<view class="font-color-666">求购单价:</view>
					<view class="font-color-textPrimary">¥{{form.price}}</view>
				</view>
				<view class="mt-16 flex flex-ai-center flex-js-sb font-size-14">
					<view class="font-color-666">消耗藏品:</view>
					<view class="font-color-theme">x{{begBuyConsumptionInfo.beg_consumption_number}}</view>
				</view>
			</view>
		</w-modal>
	</w-container>
</template>

<script>
	import {
		getBegBuyList,
		vintageTradingInformation,
		createTradOrder
	} from '@/api/trad/index.js'
	import {
		begBuyConsumption
	} from '@/api/market/index.js'
	import PayUtil from '@/utils/payUtil.js'
	export default {
		data() {
			return {
				search: {
					page: 1,
					sort: 'desc',
					collection_id: null
				},
				list: [],
				loading: 'none',
				publishShow: false,
				tipsShow: false,
				begBuyConsumptionInfo: {},
				form: {
					number: '',
					price: ''
				},
				confirmShow: false,
				topInfo: '',
			}
		},
		methods: {
			getList(search) {
				if (this.loading == 'loading' && this.loading == 'nomore') return;
				this.loading = 'loading'
				getBegBuyList(search).then(res => {
					if (search.page == 1) {
						this.list = []
					}
					this.loading = 'none'
					if (res.data.data.length) {
						this.search = search;
					}
					this.list = this.list.concat(res.data.data)
					if (res.data.data.length < res.data.per_page) {
						this.loading = 'nomore'
					}
					if (!res.data.total) {
						this.loading = 'empty'
					}
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},
			loadMore() {
				let search = this.$tools.copyObj(this.search)
				search.page++
				this.getList(search);
			},
			getTopInfo() {
				vintageTradingInformation({
					goods_id: this.search.collection_id,
					status: 2
				}).then(res => {
					this.topInfo = res.data
				})
			},
			publishChange(e) {
				this.publishShow = false
			},
			getBegBuyConsumption() {
				begBuyConsumption({
					collection_id: this.search.collection_id,
				}).then(res => {
					this.begBuyConsumptionInfo = res.data
				})
			},
			handleSubmit() {
				this.confirmShow = true
				this.publishShow = false
			},
			confirmAction(e) {
				if (e) {
					uni.showLoading({
						title: '创建中'
					})
					createTradOrder({
						collection_id: this.search.collection_id,
						pay_way: 'huifu',
						price: this.form.price,
						number: this.form.number
					}).then(res => {
						let {
							order_id,
							order_sn
						} = res.data;
						new PayUtil({
							order_id,
							order_number: order_sn,
							order_type: 11,
							pay_type: 4,
							pay_way: 'huifu',
						})
					})
				} else {
					this.confirmShow = false
					this.publishShow = true
				}
			},
			openBottom() {
				this.form.price = ''
				this.form.number = ''
				this.publishShow = true
			},
			goSell() {
				uni.navigateTo({
					url: '/pages/vintageShop/vshopBegSell?id=' + this.search.collection_id
				})
			}
		},
		onLoad({
			id
		}) {
			this.search.collection_id = id
			this.getList(this.search)
			this.getTopInfo()
			this.getBegBuyConsumption()
		},
		onReachBottom() {
			this.loadMore()
		},
		onPullDownRefresh() {
			this.list = []
			this.search.page = 1
			this.getList(this.search)
			this.getTopInfo()
			this.getBegBuyConsumption()
		},
	}
</script>

<style lang="scss" scoped>
	.vintage_begbuy{
		background-image: url($IMG_URL + '/static/bg/vshop_begbuy_bg.png');
		background-size: 750rpx 700rpx;
		background-repeat: no-repeat;
	}
	.warp {
		padding-top: 152rpx;


		.content {
			border-radius: 24rpx 24rpx 0rpx 0rpx;

			.top {
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

				.lose {
					color: #10E432;
					font-size: 28rpx;
					font-weight: bold;
				}

				.rose {
					color: #9F2825;
					font-size: 28rpx;
					font-weight: bold;
				}
			}
		}
	}

	.action {
		width: 750rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;

		.shop-action-container {
			@extend .plr-16, .ptb-8, .flex;
			height: 120rpx;
			width: 100%;


			.price {
				font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
				font-weight: 500;
			}

			.action-btn.no-sub {
				background: linear-gradient(180deg, #434976 0%, #232744 100%);
				;
				@extend .font-color-white;
				border: none;

				/deep/ .u-count-down__text {
					@extend .font-size-12,
					.font-color-white;
				}
			}

			.action-btn {
				width: 480rpx;
				height: 92rpx;
				@extend .border-color-dark,
				.font-color-dark;
				border: 1px solid;
				border-radius: 66rpx;

				/deep/ .u-count-down__text {
					@extend .font-size-12,
					.font-color-dark;
				}
			}
		}


	}

	.line {
		width: 100%;
		height: 14rpx;
		background: #222;
		border-radius: 84rpx;
	}
</style>